<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Chat Room</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .container {
            display: flex;
            flex: 1;
            height: 100%;
        }
        .frame {
            width: 25%;
            height: 100%;
            border: 1px solid #ccc;
        }
        .frame:nth-child(2) {
            width: 50%;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
    <script>
        // 建立 SSE 连接
        var source = new EventSource("/ChatServlet");
        source.onmessage = function(event) {
            var chatDiv = document.getElementById('chatFrame').contentWindow.document.getElementById('chat');
            var message = event.data;
            chatDiv.innerHTML += message + '<br>';
            chatDiv.scrollTop = chatDiv.scrollHeight;
        };
    </script>
</head>
<body>
<div class="container">
    <div class="frame">
        <iframe src="userInfoFrame.jsp" name="userInfoFrame"></iframe>
    </div>
    <div class="frame">
        <iframe src="chatFrame.jsp" name="chatFrame" id="chatFrame"></iframe>
    </div>
    <div class="frame">
        <iframe src="onlineUsersFrame.jsp" name="onlineUsersFrame"></iframe>
    </div>
</div>
</body>
</html>
